<template>
  <div>
    <MdEditor style="margin-top: 10px" :content.sync="content"></MdEditor>
    <el-button @click="downBG(background,'下载图.JPG')">下载当前背景图为例</el-button>
  </div>
</template>

<script>
import {mapGetters} from "vuex"
import $ from 'jquery'
export default {
  computed:{
    ...mapGetters(['background'])
  },
  data(){
    return{
      content:`
      //下载案例(ajax)
      const xhr = new XMLHttpRequest();
      xhr.open('get', path);
      xhr.responseType = 'blob';
      xhr.send();
      xhr.onload = function () {
        if (this.status === 200 || this.status === 304) {
          // 如果是IE10及以上，不支持download属性，采用msSaveOrOpenBlob方法，但是IE10以下也不支持msSaveOrOpenBlob
          if ('msSaveOrOpenBlob' in navigator) {
           navigator.msSaveOrOpenBlob(this.response, name);
           return;
          }
          const url = URL.createObjectURL(this.response);
          const a = document.createElement('a');
          a.style.display = 'none';
          a.href = url;
          a.download = name;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          URL.revokeObjectURL(url);
        }
      };
      //jsonP
      const script = document.createElement('script');
    script.type = 'text/javascript';

    // JSONP传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    script.src = 'https://www.fastmock.site/mock/f3fed324ab7e7eb4794aaf7e446d06f8/api/twoshop/teamlist?callback=handleCallback';
    document.head.appendChild(script);
    window.handleCallback = (res) => {
      alert(JSON.stringify(res));
    }
      `
    }
  },
  mounted() {
    // console.log(this.background)
    // const script = document.createElement('script');
    // script.type = 'text/javascript';
    //
    // // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
    // script.src = 'https://www.fastmock.site/mock/f3fed324ab7e7eb4794aaf7e446d06f8/api/twoshop/teamlist?callback=handleCallback';
    // document.head.appendChild(script);
    // window.handleCallback = (res) => {
    //   alert(JSON.stringify(res));
    // }
    window.handleCallback = (res)=>{
      console.log(JSON.parse(res))
    }
    //jquery请求 跨域
    const bg = this.background
    $.ajax({
      url:bg,
      type:'Get',
      crossDomain:true,
      dataType:'jsonp',
      responseType:'blob',
      // jsonp:'callback',
      // scriptCharset:'utf-8',
      // data:{data:Json.stringify(req)},
      xhrFields:{withCredentials:true},
      beforeSend: function(request) {
        request.setRequestHeader("responseType", "blob");
      },
      success:function(res){
        // console.log(JSON.parse(res))
        console.log(res)
      },
      error:function(){}
    })

  },
  methods:{
    downBG(path,name){
      const xhr = new XMLHttpRequest();
      xhr.open('get', path);
      xhr.responseType = 'blob';
      xhr.send();
      xhr.onload = function () {
        if (this.status === 200 || this.status === 304) {
          // 如果是IE10及以上，不支持download属性，采用msSaveOrOpenBlob方法，但是IE10以下也不支持msSaveOrOpenBlob
          if ('msSaveOrOpenBlob' in navigator) {
            navigator.msSaveOrOpenBlob(this.response, name);
            return;
          }
          const url = URL.createObjectURL(this.response);
          const a = document.createElement('a');
          a.style.display = 'none';
          a.href = url;
          a.download = name;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          URL.revokeObjectURL(url);
        }
      };
      //JSONp
      // var script = document.createElement('script');
      // script.type = 'text/javascript';
      //
      // // 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
      // script.src = 'https://www.fastmock.site/mock/f3fed324ab7e7eb4794aaf7e446d06f8/api/twoshop/teamlist?callback=handleCallback';
      // document.body.appendChild(script);
      // window.handleCallback = (res) => {
      //   alert(JSON.stringify(res));
      // }
      // return

    }
  }
}
</script>